<!--
 * @Date: 2024-12-13 10:41:56
 * @Author: LiSong
 * @LastEditors: Healer 7671914+xmmi@user.noreply.gitee.com
 * @LastEditTime: 2024-12-23 14:34:23
 * @Description: 
-->
<template>
  <HpDialog v-model="dialogState.visible"
    ref="dialogRef"
    top="15vh"
    title="指标配置"
    width="70%"
    height="60%"
    class="iput-series-dialog"
    :appendToBody="false"
    @close="handleCancel"
    @confirm="handleConfirm">
    <div class="series-dialog-body">
      <RkTable ref="tableRef"
        :="tableAttrs">
        <template #toolbar_left>
          <el-button type="primary"
            @click="addTableRow">添加</el-button>
          <el-button type="danger"
            @click="delTableRow">删除</el-button>
        </template>
        <template #toolbar_right>
        </template>
        <template #input="{ row, column }">
          <HpInput v-model="row[column.field]"
            placeholder="请输入" />
        </template>
        <template #color="{ row, column }">
          <HpInputColor v-model="row[column.field]" />
        </template>
        <template #switch="{ row, column }">
          <HpSwitch v-model="row[column.field]" />
        </template>
        <template #select_filed="{ row, column }">
          <HpSelect v-model="row[column.field]"
            :options="fieldOptions" />
        </template>
        <template #select="{ row, column }">
          <HpSelect v-model="row[column.field]"
            :options="column.params.options" />
        </template>
      </RkTable>
    </div>
  </HpDialog>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from 'vue';

import { getUUID } from '@hp/utils/data.js'
import { useDbSource } from '@hp/hooks/useDbSource.js'

const { loadDataCols } = useDbSource()

import RkTable from '@/components/rk-table';
import HpDialog from '@hp/comps/dialog/src/HpDialog.vue'
import { pluginManager } from '@hp/utils/pluginManager.js'
import { LineSymbolOptions,BarLabelPosition } from '@hp/config/option/echarts'

const HpInput = pluginManager.attrEditors['input']
const HpSelect = pluginManager.attrEditors['select']
const HpSwitch = pluginManager.attrEditors['switch']
const HpInputColor = pluginManager.attrEditors['input-color']

const props = defineProps({
  // 弹窗名称
  title: { type: String, default: '项目申报' },
  // 父节点数据
  pData: { type: Object },
  // 数据集
  schema: { type: Object },
  // 结构配置
  config: { type: Object },
  // 是否可见
  visible: { type: Boolean, default: false },
  // 数据集
  modelState: { type: Object },
  // 取消方法
  onCancel: { type: Function },
  // 确认方法
  onConfirm: { type: Function },
  // 销毁方法
  onDestory: { type: Function },
})

// 弹窗的Ref
const dialogRef = ref(null)
// 弹窗数据集
const dialogState = reactive({
  visible: props.visible
})
const handleCancel = () => {
  if (props.onCancel) { props.onCancel() }
  handleDestory()
}
const handleConfirm = () => {
  const { tableData } = tableRef.value.getTableData()
  const result = tableData.filter(item => item.field)
  if (props.onConfirm) { props.onConfirm(JSON.parse(JSON.stringify(result))) }
  handleDestory()
}
const handleDestory = () => {
  if (props.onDestory) { props.onDestory() }
}

const tableRef = ref(null);
let tableColumns = reactive([]);
//默认
const defaultColumns = reactive([
  { field: 'name', title: '名称', sortable: false, slots: { default: 'input' } },
  { field: 'field', title: '字段', sortable: false, slots: { default: 'select_filed' } },
  { field: 'color', title: '颜色', sortable: false, slots: { default: 'color' } },
  { field: 'barWidth', title: '柱状宽度', sortable: false, slots: { default: 'input' } },
  { field: 'stack', title: '是否堆叠', align: 'center', sortable: false, slots: { default: 'switch' } },
  { field: 'label', title: '显示文本', align: 'center', sortable: false, slots: { default: 'switch' } },
  { field: 'labelColor', title: '文本颜色', sortable: false, slots: { default: 'color' }, visible: true },
  {
    field: 'labelPosition', title: '文本位置', sortable: false, slots: { default: 'select' }, visible: true,
    params: {
      options: BarLabelPosition
    }
  },
  {
    field: 'symbol', title: '标记类型', sortable: false, slots: { default: 'select' },
    params: {
      options: LineSymbolOptions
    }
  },
  { field: 'smooth', title: '是否平滑', sortable: false, align: 'center', slots: { default: 'switch' } },
  { field: 'isArea', title: '是否面积图', sortable: false, align: 'center', slots: { default: 'switch' } },
])


const tableAttrs = reactive({
  data: props.modelState,
  keyField: 'id',
  boxConfig: { mode: 'checkbox', fixed: true },
  pagerConfig: false,
  toolbarConfig: { refresh: false },
  sortable: false,
  columns: tableColumns
})

const fieldOptions = computed(() => {
  return loadDataCols(props.pData)
})

/** 加载表格字段 */
let loadColumns = (configData) => {
  defaultColumns.forEach(row => {
    if (Object.keys(configData).includes(row.field)) {
      tableColumns.push(row)
    }
  })
}

/**
 * 添加一行数据到表格
 * 1. json序列化模板行数据,并深拷贝
 * 2. 生成id
 * 3. 在表格中追加一行数据
 */
const addTableRow = () => {
  const records = JSON.parse(JSON.stringify(props.config.compProps.configData))
  tableRef.value.insertAt({
    ...records,
    id: getUUID(),
  }, null)
}
/**
 * 删除选中的行
 * 
 * 1. 获取当前选中的行数据
 * 2. 如果没有选中的行,则什么都不做
 * 3. 删除当前选中的行
 */
const delTableRow = () => {
  const checkRecords = tableRef.value.getCheckboxRecords()
  if (!checkRecords.length) return
  tableRef.value.removeCheckboxRow()
}

onMounted(() => {
  // 初始化表格数据
  loadColumns(props.config.compProps.configData);
})

</script>

<style lang="scss" scoped>
.series-dialog-body {
	height: 100%;
}
</style>